<script setup>


import {useOrderInfoStore, useUserStore} from "@/stores/index.js";
import {ref, computed} from "vue";
import {userGetUserInfoById} from "@/api/user.js";
import {format} from "date-fns";

const userId = useOrderInfoStore().orderInfo.userId
const userInfo = ref()
const getUserInfo = async () => {
  const res = await userGetUserInfoById(userId)
  userInfo.value = res.data
  console.log(userInfo.value)
}
const formatBirthday = computed(() => {
  return format(userInfo.value.birthday, "yyyy-MM-dd")
})



getUserInfo()
</script>

<template>
  <div  v-if="userInfo">
    <el-card>
      <el-descriptions class="margin-top" title="简介" :column="2" border>
        <template slot="extra">
          <el-button type="primary" size="small">操作</el-button>
        </template>
        <el-descriptions-item>
          <template v-slot:label>
            头像
          </template>
          <img class="img" src="@/assets/tx.jpg" alt="" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template v-slot:label>
            账户名
          </template>
          {{ userInfo.username }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template v-slot:label>
            昵称
          </template>
          {{ userInfo.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template v-slot:label>
            年龄
          </template>
          {{ 18 }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template v-slot:label>
            性别
          </template>
          <el-tag size="small">
            {{ parseInt(userInfo.sex) === 1 ? '男' : '女' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template v-slot:label>
            邮箱Email
          </template>
          {{ 'example@qq.com' }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template v-slot:label>
            手机号码
          </template>
          {{ userInfo.phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template v-slot:label>
            地区
          </template>
          {{ '贵州省' }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template v-slot:label>
            职业
          </template>
          {{ '学生' }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template v-slot:label>
            兴趣爱好
          </template>
          {{ '编程、打游戏' }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template v-slot:label>
            个性签名
          </template>
          {{ '这个人很懒，什么都没有写~' }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template v-slot:label>
            注册日期
          </template>
          {{ formatBirthday }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<style scoped>
.img {
  width: 80px;
  height: 80px;
}
</style>
